<template>
  <div class="message cp" :class="current_contact.id === id && current_contact.id_type === idType ? 'selected' : ''">
    <div class="messageBox flex-between">
      <div class="avatar">
         <avatar :id="id" :imgID="imgID" :fileType="idType === 1 ? 1 : 6"></avatar>
      </div>
      <div class="infoBox">
        <div class="title">{{ name }}</div>
        <div class="subword" v-if="!draft || (current_contact.id === id && current_contact.id_type === idType)">{{ idType === 2 && !tools.isSelf(msgUserID) ? msgUserName : '' }}{{ words }}</div>
        <div class="draft" v-else>
          <span>[草稿]</span>
          <span>{{ draft }}</span>
        </div>
        <div class="time">{{ time }}</div>
<!--        <div-->
<!--          class="messageNumber cp"-->
<!--          v-if="showMessageNumber"-->
<!--          @mousedown.capture="beginMove"-->
<!--        >-->
<!--          <div class="numberBox" v-show="unreadMessage">-->
<!--            <span>{{ unreadMessage }}</span>-->
<!--          </div>-->
<!--        </div>-->
        <div
          class="messageNumber cp"
          v-if="showMessageNumber"
        >
          <div class="numberBox" v-show="unreadMessage">
            <span>{{ unreadMessage > 99 ? '99+' : unreadMessage }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sendSock } from '@/utils/socketSend'

export default {
  props: {
    // 联系人ID
    id: {
      require: String | Number,
      default: ''
    },
    // 当前群组联系人ID
    msgUserID: {
      require: Number
    },
    name: {
      require: String,
      default: '牛战士'
    },
    words: {
      require: String
    },
    time: {
      require: String
    },
    // 联系人类型
    idType: {
      require: Number
    },
    // 未读消息数量
    unreadMessage: {
      require: Number
    },
    // 草稿
    draft: {
      require: String
    }
  },
  data () {
    return {
      showMessageNumber: true, // 是否显示未读消息数
      selfMessageEl: null, // 消息数盒子Dom元素
      centerGapX: 0, // 距离鼠标中心点的 X差距
      centerGapY: 0 // 距离鼠标中心点的 Y差距
    }
  },
  computed: {
    current_contact () { // 当前卡片是否选中
      return this.$store.state.chatInformation.current_contact
    },
    // 头像ID
    imgID () {
      if (this.idType === 1) {
        return this.$store.state.chatInformation.userList[this.id].user_img_id
      } else if (this.idType === 0) {
        return this.id
      } else {
        return this.$store.state.chatInformation.groupList[this.id].group_img_id
      }
    },
    // 当前消息联系人姓名
    msgUserName () {
      if (this.$store.state.chatInformation.userList[this.msgUserID]) {
        if (this.$store.state.chatInformation.userList[this.msgUserID].remarks) {
          return this.$store.state.chatInformation.userList[this.msgUserID].remarks + '：'
        } else {
          return this.$store.state.chatInformation.userList[this.msgUserID].user_name + '：'
        }
      } else {
        return ''
      }
    }
  },
  watch: {
    current_contact: {
      immediate: true,
      handler (val) {
        if (val.id === this.id && val.id_type === this.idType && this.unreadMessage) {
          const msgs = this.$store.state.chatInformation.chatInformation.filter(item => {
            return item.id === val.id && item.id_type === val.id_type
          })[0].messages
          this.$store.commit('chatInformation/clear_unreadMessage', { id: this.id, idType: this.idType })
          if (val.id !== 'notification') {
            sendSock({
              type: '5.2.1',
              body: {
                msg_id: msgs[msgs.length - 1].msg_id + ''
              }
            })
          }
        }
      }
    }
  },
  methods: {
    // beginMove (e) {
    //   this.$store.commit('message/set_moveId', this.id)
    //   this.centerGapX = e.target.clientWidth / 2
    //   this.centerGapY = e.target.clientHeight / 2
    //   //
    //   this.selfMessageEl = e.target.parentElement.parentElement
    //   this.selfMessageEl.style.position = 'fixed'
    //   this.selfMessageEl.style.top = e.pageY - this.centerGapY + 'px'
    //   this.selfMessageEl.style.left = e.pageX - this.centerGapX + 'px'
    // },
    // moveMessage (x, y) {
    //   if (!this.selfMessageEl) return
    //   //
    //   this.selfMessageEl.style.top = y - this.centerGapY + 'px'
    //   this.selfMessageEl.style.left = x - this.centerGapX + 'px'
    //
    // }
  }
}
</script>

<style lang="scss" scoped>
.message {
  padding: 16px 15px 15px;
  border-bottom: 1px solid rgba(235, 237, 243, 0.75);
  &:hover {
    background: rgba(48, 78, 236, 0.03);
  }
  .messageBox {
    .avatar {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 2px;
      }
    }
    .infoBox {
      width: 218px;
      position: relative;
      .title {
        height: 20px;
        font-size: 14px;
        color: #0D172C;
        line-height: 20px;
        margin-bottom: 3px;
      }
      .subword {
        height: 17px;
        font-size: 12px;
        color: #5f7196;
        line-height: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .draft {
        height: 17px;
        font-size: 12px;
        color: #5f7196;
        line-height: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          font-size: 12px;
          &:first-child {
            color: #FF3E6D;
          }
        }
      }
      .time {
        height: 17px;
        font-size: 12px;
        text-align: right;
        color: #9eaac4;
        line-height: 17px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .messageNumber {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 14px;
        .numberBox {
          position: relative;
          height: 100%;
          width: 100%;
          span {
            height: 100%;
            background-color: #ff3e6d;
            line-height: 14px;
            border-radius: 7px;
            color: #fff;
            position: absolute;
            right: -1px;
            top: 50%;
            padding: 0 4px;
            font-size: 12px;
            transform: translateY(-50%) scale(0.83);
          }
        }
      }
    }
  }
}
.selected{
  background-color: rgba(48, 78, 236,0.05);
}
</style>
